<template>
	<div class="borderNone">
		<div class="border">
			<el-icon>
				<Top v-if="Number(toPoint(num))>0" style="color: #AB3B3A"/>
				<Bottom v-else style="color: #028cda"/>
			</el-icon>
			<span>{{ props.num }}</span>
		</div>
		<div class="lastYue">{{ props.text }}</div>
	</div>
</template>

<script  setup>

  import { Top, Bottom } from "@element-plus/icons-vue";
  import {  defineProps } from "vue";

  const props = defineProps({
    text: {
      type: String,
    },
		num:{
      type: String,
    }
  });
  function toPoint(percent){
    if(percent){
      var str=percent.replace("%","");
      str= str/100;
      return str;
    }
  }


</script>
<style lang="scss">
	.borderNone {
		height: 100%;
		display: flex;
		flex-direction: column;
		justify-content: center;
		.border {
			width: 87px;
			height: 34px;
			margin: 0 auto;
			border-radius: 2px 2px 2px 2px;
			display: flex;
			justify-content: center;
			align-items: center;
			/deep/.el-icon {
				color: #028cda;
				font-size: 22px;
			}
			span:last-child {
				margin-left: 4px;
				color: #bac6cc;
				font-size: 18px;
			}
		}
		.lastYue {
			margin-top: 4px;
			font-size: 12px;
			color: #8e939a;
			text-align: center;
			display: block;
		}
	}

</style>
